<template>
  <div>
    <el-card class="box-card">
      <span style="margin-left: 80px">温馨提示 : </span>
      <span style="color: red">数字代表权重,数字越大,排名越高</span><br>
      <el-row :gutter="100" style="margin-top: 30px">
        <el-col :span="8">
          <el-tree
            :data="data"
            :expand-on-click-node="false"
            default-expand-all
            node-key="id"
            show-checkbox>
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span> {{ data.childName }}&nbsp;{{ data.sort}}</span>
                <span>
                  <el-button @click="() => append(data)" size="mini" type="text">添加</el-button>
                  <el-button @click="() => getNode(node,data)" size="mini" type="text" v-if="data.id!=0">编辑</el-button>
                  <el-button @click="() => remove(node, data)" size="mini" type="text" v-if="data.id!=0">删除</el-button>
                </span>
              </span>
          </el-tree>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card grid-content bg-purple-light" v-if="isShow">
            <div class="clearfix" slot="header">
              <span>专业信息</span>
              <el-button @click="saveMenu" style="float: right; padding: 2px 0" type="text">保存</el-button>
              <el-button @click="closeMenu" style="float: right; padding: 2px 0" type="text">关闭</el-button>
            </div>
            <el-form :model="CategoryForm" label-width="70px">
              <el-form-item label="父级专业">
                <el-input :disabled="true" size="small" v-model="parentName"></el-input>
              </el-form-item>
              <el-form-item label="专业名称">
                <el-input size="small" v-model="CategoryForm.childName"></el-input>
              </el-form-item>
              <el-form-item label="权重">
                <el-input size="small" v-model="CategoryForm.sort"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>
  export default {
    name: "Profession",
    data() {
      return {
        data: [
          {
            id: 0,
            childName: '专业管理',
            children: []
          }
        ],
        isShow: false,
        CategoryForm: {},
        parentName: '',
        a:'      '
      }
    },
    methods: {
      closeMenu: function () {
        this.isShow = false;
        this.CategoryForm = {};
        this.parentName="";
      },
      getTree: function () {//按照树的组件封装数据结构
        this.$http.get("education-course/category/getTree").then((res) => {
          if (res.data.success) {
            this.data[0].children = res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      saveMenu: function () {
        this.$http.post("education-course/category/save", this.CategoryForm).then((res) => {
          if (res.data.success) {
            this.$message({message: res.data.message, type: 'success'});
          } else {
            this.$message.error(res.data.message);
          }
          //关闭菜单框
          this.closeMenu();
          //渲染菜单树
          this.getTree();
        });
      },
      append: function (data) {
        this.isShow = true;
        this.parentName = data.childName;//设置父级菜单名称
        this.CategoryForm.parentId = data.id; //设置父级菜单id
        //设置排序
      },
      remove: function (node, data) {//删除
        if(confirm("确定删除此专业?")){
          this.$http.get("education-course/category/delTree/" + data.id).then((res) => {
            if (res.data.success) {
              this.$message({message: res.data.message, type: 'success'});
              this.getTree();//重新加载tree
            } else {
              this.$message.error(res.data.message);
            }
          });
        }

      },
      getNode: function (node,data) {//回显
        this.isShow=true;
        this.parentName=node.parent.data.childName;
        this.$http.get("education-course/category/get/" + data.id).then((res) => {//当前节
          if (res.data.success) {
            this.CategoryForm=res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    mounted() {
      this.getTree();
    }
  }
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

